<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-3.6.0.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 200px;
            height: 300px;
            background-color: skyblue;
        }

        h3 {
            margin: 10px 0;
        }
    </style>
</head>

<body>
    <form action="" name="form">
        <h3>速度</h3>
        <input type="radio" name="speed" id="" value="slow">slow
        <input type="radio" name="speed" id="" value="normal">normal
        <input type="radio" name="speed" id="" value="fast">fast
        <input type="number" name="number" id="">ms
        <br>
        <h3>动画效果</h3>
        <input type="radio" name="easing" id="" value="swing">swing
        <input type="radio" name="easing" id="" value="linear">linear
        <br>
    </form>
    <button data-type="show">显示</button>
    <button data-type="hide">隐藏</button>
    <button data-type="toggle">切换</button>
    <div class="box"></div>
    <script>
        $(function () {
            $("button").click(function () {
                //获取点击元素
                let type = this.dataset.type;
                //获取表单元素
                let form = document.forms.form;
                //获取数字
                let number = form['number'].value;
                console.log(number);
                //获取速度和动画效果的值
                let speed = form['speed'].value;
                let easing = form['easing'].value;
                //秒数存在,动画效果的值不写的
                // if (number != '' && speed != '' && easing != '') {
                //     alert("number存在,speed和easing不能选")
                // }
                if(number !=''&&(speed != '' || easing != '')){
                    alert("number存在,speed和easing不能选")
                }
                if (number != '' && speed == '' && easing == '') {
                    if (type == 'show') {
                        $('div').show(Number(number));
                    } else if (type === 'hide') {
                        $('div').hide(Number(number));
                        // $('div').hide(2000);
                    } else if (type == 'toggle') {
                        $('div').slideToggle(Number(number));
                    }
                }
                if (number == '') {
                    if (type == 'show') {
                        $('div').show(speed, easing);
                    } else if (type === 'hide') {
                        $('div').hide(speed, easing);
                        // $('div').hide(2000);
                    } else if (type == 'toggle') {
                        $('div').slideToggle(speed, easing);
                    }
                }
                // if (type == 'show') {
                //         $('div').show();
                //     } else if (type === 'hide') {
                //         $('div').hide(Number(number));
                //         // $('div').hide(2000);
                //     }else if(type=='toggle'){
                //         $('div').slideToggle();
                //     }


                //     function fn(number, speed,easing) {
                //         if (number != '' && speed != '') {
                //             return alert("输入有误,请重新输入")
                //         } else if (number != '' && speed == ''&& easing=='') {
                //             return number;
                //         } else if (number == '' && speed != ''&& easing!='') {
                //             let arr=[speed,easing];
                //             return arr;
                //         }
                //     }
            })
        })
    </script>
</body>

</html>